<template>
  <a-modal title-align="start" title="获取产品图" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="600">
    <a-space>
      <a-input style="width: 200px" v-model="sku" placeholder="请输入SKU" />
      <a-button class="gray-outline" @click="search">查询</a-button>
    </a-space>

    <div style="margin-top: 20px">
      <a-image-preview-group infinite>
        <a-checkbox-group v-model="selImg">
          <a-space>
            <div style="position: relative" v-for="(item, index) of imgList" :key="index">
              <a-image :src="'https://erpapi.selleroa.com/v1/aliyun/oss/getAmazonImage?url=' + item.url" width="80" height="80">
                <template #extra>
                  <a-checkbox :value="item.url" style="position: absolute; right: 10px; top: 10px"></a-checkbox>
                </template>
              </a-image>
            </div>
          </a-space>
        </a-checkbox-group>
      </a-image-preview-group>
    </div>

    <template #footer class="modal-footer">
      <a-button @click="showvisible = false">取消</a-button>
      <a-button type="primary" @click="submit">确定</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { defineComponent, ref, computed } from 'vue'
  import { getProductSKUList } from '@/api/product'
  import { Message } from '@arco-design/web-vue'
  let props = defineProps(['modelValue', 'type', 'info'])
  let emits = defineEmits(['save', 'update:modelValue'])

  let showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })

  let sku = ref('')
  let imgList = ref([])
  let selImg = ref([])
  const search = async () => {
    let params = {
      productType: 'normal',
      skuList: [sku.value],
    }
    const res: any = await getProductSKUList(params)
    let arr = res?.data?.records
    if (!arr[0]) return Message.error('该SKU不存在')
    let obj = arr[0]
    imgList.value = obj?.productPicList || []
  }

  const submit = () => {
    emits('save', selImg.value)
    showvisible.value = false
  }
</script>

<style lang="less" scoped></style>
